<template>
    <div class="details">
        <div class="nav-title">
            <img src="@/img/pic2.png">
            <h1>需求供应>>订单详情页</h1>
        </div>
        <div class="supply">
            <el-row>
                <el-col :lg="18" :sm="24" :xs="24">
                    <div class="supply-new">
                        <div class="supply-title">
                            <h1>{{supply.goodsname}}</h1>
                            <h2>{{supply.orderNameen}}</h2>
                            <p>
                                <span>发布日期:{{ supply.publishtime }}</span>
                                <span>行业分类:{{ business[supply.businessid-1] }}</span>
                            </p>
                        </div>
                        <div class="supply-tab">
                            <div class="tab-left">
                                <img :src="imgurl">
                            </div>
                            <div class="tab-right">
                                <img :src="supply.img1" @click="imgfun(supply.img1)" alt="">
                                <img :src="supply.img2" @click="imgfun(supply.img2)" alt="">
                                <img :src="supply.img3" @click="imgfun(supply.img3)" alt="">
                            </div>
                        </div>
                        <div class="supply-content">
                            <div class="supply-count">
                                <span class="type1">点击量:{{supply.clickcount}}</span>
                                <span class="type2">订单状态:{{supply.tradeflag==0?"未完成":"已完成"}}</span>
                                <span class="qqbtn" @click="qqfun"><img src="@/img/qq.png">在线询价</span>
                            </div>
                            <div class="supply-news">
                                <p>{{supply.details}}</p>
                            </div>
                            <div class="vip">
                                <h1>请升级企业<img src="@/img/vip.jpg">查看订单详细信息</h1>
                                <el-button type="danger"><router-link to="vipres">我要升级vip</router-link></el-button>
                            </div>
                            <div class="log">
                                <h1>注册或登录查看订单详细信息</h1>
                                <p>
                                    <el-button type="danger"><router-link to="/login">登录</router-link></el-button>
                                    <el-button type="danger"><router-link to="/res">注册</router-link></el-button>
                                </p>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :lg="6" :sm="24" :xs="24">
                    <supplyNav :busdata="business" :siddata="sidebar" @event="childfun"></supplyNav>
                </el-col>
            </el-row>
        </div>
    </div>

</template>
<script>
import { toRefs, reactive, getCurrentInstance,onMounted} from 'vue'
import supplyNav from '@/components/supply_Nav.vue'
import { useRoute } from 'vue-router'
export default {
    components: {
        supplyNav: supplyNav
    },
    setup() {
        const data = reactive({
            imgurl:"/src/img/info1.png",
            business:[],
            sidebar:[],
            supply:{},
            orderid:""
        })
        const imgfun = (value) => {
            data.imgurl = value;
        }
        const qqfun=()=>{
            window.location.href="tencent://message/?uin=2343645&Menu=yes";
        }
        const childfun=(value)=>{
            data.businessid=value
            selpurchase()
        }
        const route=useRoute()
        const {proxy}= getCurrentInstance()
        onMounted(async()=>{
            data.orderid=route.query.id
            //行业分类
            await proxy.$axios.get("/api/business",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                data.business=arr
            })
            .catch(function(error){
                console.log(error);
            });
            //侧栏
            await proxy.$axios.get("/api/sidebar2",{params:{}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                for (var obj of arr){
                    obj.img1=`/src/${obj.img1}`
                }
                data.sidebar=arr
            })
            //详情查询
            await proxy.$axios.get("/api/orderbyid",{params:{orderid:data.orderid}})
            .then(function(response){
                var arr=JSON.parse(response.data)
                console.log(arr)
                arr.img1=`/src/${arr.img1}`
                arr.img2=`/src/${arr.img2}`
                arr.img3=`/src/${arr.img3}`
                data.supply=arr
                data.imgurl=arr.img1
            })
            .catch(function(error){
                console.log(error);
            });
        })
        return {
            ...toRefs(data),imgfun,qqfun,childfun
        }
    }
}
</script>
<style scoped></style>